TanStack DB Query-Driven Sync Demo

A full-stack movie rental application showcasing TanStack DB's query-driven sync capabilities with a highly normalized database.

Project Structure

hljs movie-rentals-tanstack-db/
├── apps/
│   ├── api/          # Elysia.js backend API
│   └── client/       # TanStack Router frontend
└── packages/         # Shared packages

Quick Start

# Install dependencies
pnpm install

# Run both frontend and backend
pnpm dev

URLs:

• Frontend: http://localhost:3000
• API: http://localhost:5000

What's Built

✅ Backend API (Elysia.js)

A modular, type-safe REST API with a normalized database structure:

API Routes:

• /api/actors - Actor CRUD operations
• /api/films - Film CRUD operations
• /api/categories - Category CRUD operations
• /api/languages - Language CRUD operations
• /api/film-actors - Film-Actor relationships
• /api/film-categories - Film-Category relationships

Features:

• ✅ Modular route structure (separate file per resource)
• ✅ Type-safe validation with Elysia TypeBox
• ✅ Global error handling
• ✅ CORS enabled
• ✅ OpenAPI documentation
• ✅ Drizzle ORM with SQL.js
• ✅ Sakila database (normalized schema)

✅ Frontend (TanStack Router)

Clean, minimal frontend ready for TanStack DB integration:

Pages:

• Home - Landing page
• Movies - Movie listings
• Actors - Actor listings

Features:

• ✅ TanStack Router with file-based routing
• ✅ TanStack Query integration ready
• ✅ Responsive navigation
• ✅ Tailwind CSS styling

API Examples

# Get all actors
curl http://localhost:5000/api/actors

# Get single actor
curl http://localhost:5000/api/actors/1

# Create actor
curl -X POST http://localhost:5000/api/actors \
  -H "Content-Type: application/json" \
  -d '{"firstName":"Tom","lastName":"Hanks"}'

# Get films by actor
curl http://localhost:5000/api/film-actors/by-actor/1

Database Schema

Highly normalized Sakila database demonstrating TanStack DB's relationship management:

hljs actors ──▶ film_actor ◀── films ──▶ film_category ◀── categories
                              │
                              ▼
                          languages

Next Steps for TanStack DB

1. Install TanStack DB in client
2. Configure sync strategies
3. Implement optimistic updates
4. Add real-time sync
5. Demonstrate offline-first capabilities

Tech Stack

Backend: Elysia.js, Drizzle ORM, SQL.js, TypeBox
Frontend: TanStack Router, TanStack Query, Vite, Tailwind CSS
Monorepo: Turborepo with pnpm workspaces